<template>
  <Data_navigate></Data_navigate>
  <div style="background-color: #ffffff; margin: 20px; border-radius: 1em; padding: 20px;">
    <!-- 绑定ref到chart元素 -->
    <div ref="chartRef" style="width: 50%; height: 400px;"></div>
  </div>
</template>

<script setup lang="ts">
import Data_navigate from '@/components/datas/data_navigate.vue';
import * as echarts from 'echarts';
import { onMounted, ref, onBeforeUnmount } from 'vue';


const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;

const initChart = () => {
  chart = echarts.init(chartRef.value);
  const option = {
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  chart.setOption(option);
}

const handleResize = () => {
  if (chart) {
    chart.resize();
  }
}

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>
